<template>
    <div class="header">
        <el-menu
                router
                :default-active="activeIndex"
                mode="horizontal"
                class="header-nav"
                background-color="#515a6e"
                text-color="#dddddd"
                active-text-color="#ffffff">
            <el-menu-item v-for="system in systemList" :index="system.routing" :key="system.ukId" @click="activeSystem(system.ukId)">
                {{system.name}}
            </el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
            <div class="header-user" tabindex="-1">
                <el-avatar size="medium" style="margin-top: 9px; margin-right:5px; float: left"></el-avatar>
                <el-dropdown
                        @command="handleCommand"
                        trigger="click"
                        split-button
                        size="small">
                    {{loginUser.username ? loginUser.username : 'Null'}}
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="set">Set</el-dropdown-item>
                        <el-dropdown-item command="logout" divided>Sign out</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button-group>
                    <el-button size="small" v-popover:noticeTable @click="handleClickNotice">
                        <i class="el-icon-bell"></i>
                    </el-button>
                    <el-button size="small">
                        <i class="el-icon-chat-dot-square"></i>
                    </el-button>
                </el-button-group>
                <el-popover
                        ref="noticeTable"
                        placement="bottom-end"
                        row-key="ukId"
                        width="400"
                        trigger="click">
                    <el-table
                            @row-dblclick="handleNoticeDbClick"
                            border
                            size="mini"
                            height="300"
                            :data="noticeTable">
                        <el-table-column
                                show-overflow-tooltip
                                width="240"
                                prop="title"
                                label="title">
                        </el-table-column>
                        <el-table-column
                                show-overflow-tooltip
                                width="*"
                                prop="releaseTime"
                                label="releaseTime">
                        </el-table-column>
                    </el-table>
                </el-popover>
            </div>
        </el-menu>
        <el-dialog
                width="55%"
                title="设置"
                :visible.sync="showUserSettingForm"
                :close-on-click-modal="false"
                label-width="80px">
            <el-tabs
                    @tab-click="handleTabClick"
                    value="personal"
                    tab-position="right">
                <el-tab-pane
                        name="personal"
                        label="用户信息">
                    <el-row>
                        <el-col :span="12">
                            <el-form ref="form" :model="personalForm" label-width="80px">
                                <el-form-item label="账号">
                                    <el-input v-model="personalForm.account" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="用户名">
                                    <el-input v-model="personalForm.username"></el-input>
                                </el-form-item>
                                <el-form-item label="角色">
                                    <el-input v-model="personalForm.username"></el-input>
                                </el-form-item>
                                <el-form-item label="所属机构">
                                    <el-input v-model="personalForm.username"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="handleSaveUserInfo">保存</el-button>
                                    <el-button @click="showUserSettingForm = false">取 消</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="12">
                            <el-form ref="form" :model="personalForm" label-width="80px">
                                <el-form-item label="电话">
                                    <el-input v-model="personalForm.userInfo.telephone"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号">
                                    <el-input v-model="personalForm.userInfo.phone"></el-input>
                                </el-form-item>
                                <el-form-item label="Email">
                                    <el-input v-model="personalForm.userInfo.email"></el-input>
                                </el-form-item>
                                <el-form-item label="地址">
                                    <el-input v-model="personalForm.userInfo.address"></el-input>
                                </el-form-item>
                                <el-form-item label="性别">
                                    <el-input v-model="personalForm.userInfo.gender">
                                        <el-option label="男" :value="1"></el-option>
                                        <el-option label="女" :value="0"></el-option>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="年龄">
                                    <el-input v-model="personalForm.userInfo.age"></el-input>
                                </el-form-item>
                                <el-form-item label="生日">
                                    <el-input v-model="personalForm.userInfo.birthday"></el-input>
                                </el-form-item>
                                <el-form-item label="昵称">
                                    <el-input v-model="personalForm.userInfo.nickname"></el-input>
                                </el-form-item>
                                <el-form-item label="简介">
                                    <el-input type="text" v-model="personalForm.userInfo.introduction"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="密码管理">密码管理</el-tab-pane>
                <el-tab-pane label="系统设置">
                    <p>语言</p>
                    <p>开机启动（客户端）</p>
                    <p>多窗口</p>
                    <p>点击关闭时 最小化/退出</p>
                    <p>好友与聊天</p>
                    <p>提醒设置</p>
                    <p>关于</p>
                </el-tab-pane>
                <el-tab-pane label="个性化">个性化</el-tab-pane>
            </el-tabs>
        </el-dialog>
        <el-dialog
                title="通知公告"
                :close-on-click-modal="false"
                :visible.sync="showNoticeDetails">
            {{noticeDetails}}
        </el-dialog>
    </div>
</template>

<script>
  import MenuUtil from "../utils/MenuUtil";
  import {getLoginUser, userLogout} from "../api/manage/login";

  import router from "../router"
  import {savePersonal, selectPersonal} from "../api/manage/personal";
  import {listNotice} from "../api/manage/notice";
  import {listSystemByUser} from "../api/manage/menu";
  import {mapDict} from "../api/manage/dict";
  import DictUtils from "../utils/DictUtils";

  export default {
    name: 'Header',
    data () {
      return {
        activeIndex: "",
        showUserSettingForm: false,
        userSettingForm: {},
        loginUser: {},
        personalForm: {
          userInfo: {}
        },
        noticeTable: [],
        showNoticeDetails: false,
        noticeDetails: {},
        systemList: []
      }
    },
    methods: {
      handleSaveUserInfo () {
        savePersonal().then(result => {
        }).catch(error => {
          console.log(error)
        })
      },
      handleTabClick (tab) {
        if (tab.name === 'personal') {
          selectPersonal(this.loginUser.ukId).then(result => {
            this.personalForm = result.data.personal
          })
        }
      },
      handleCommand (command) {
        if ("set" == command) {
          selectPersonal(this.loginUser.ukId).then(result => {
            this.personalForm = result.data.personal
          })
          this.showUserSettingForm = true
        }
        if ("logout" == command) {
          this.logout()
        }
      },
      getLoginUser () {
        getLoginUser().then(result => {
          if (result.code === 200 && result.data.loginUser !== null) {
            this.loginUser = result.data.loginUser
            listSystemByUser(this.loginUser.ukId).then(result => {
              this.systemList = result.data.menus
            })
          } else {
            router.push({path: '/login'})
          }
        }).catch(error => {
          router.push({path: '/login'})
        })
      },
      logout () {
        userLogout().then(result => {
          if (result.code === 200) {
            router.push({path: '/login'})
          }
        }).catch(error => {
          console.log(error)
        })
      },
      handleClickNotice () {
        this.listNotice();
      },
      listNotice () {
        listNotice({status: 1}, 1, 3).then(result => {
          this.noticeTable = result.data.notices.records
        })
      },
      handleNoticeDbClick (row) {
        this.noticeDetails = {}
        this.noticeDetails = row
        this.showNoticeDetails = true
      },
      activeSystem(system) {
        console.log(system)
        this.$store.dispatch('saveActiveSystem', system)
      },
      mapDict () {
        mapDict().then(result => {
          DictUtils.setDict(this, "manage", result.data.dictMap)
        })
      }
    },
    created () {
      this.activeIndex = MenuUtil.activeMenu(this.$route.path, 1)
      this.getLoginUser()
      this.listNotice()
      this.mapDict()
    }
  }
</script>

<style>
    .header {
        width: 100%;
        height: 50px;
        border-bottom: #cccccc 1px solid;
    }

    .header-nav {
        padding-left: 200px;
        height: 50px;
        width: calc(100% - 200px);
    }

    .header-user {
        margin-right: 10px;
        float: right;
    }
    .header-user:focus {
        outline: none;
    }


    /* element ui样式重写 */
    .el-menu {
        border: none;
        user-select: none;
    }

    .header-nav > .el-menu-item {
        height: 48px;
        line-height: 48px;
    }

    .header-nav > .el-submenu > .el-submenu__title {
        height: 46px;
        line-height: 46px;
    }

    .header-nav > .is-active {
        border-bottom: #2d8cf0 3px solid !important;
    }

    .header-nav > .is-active .el-submenu__title {
        border: none !important;
    }

    .header-user > .el-button-group > .el-button {
        background: none;
        color: #ffffff;
    }

    .header-user > .el-dropdown {
        margin-top: 10px;
    }

    .header-user > .el-dropdown > .el-button-group > .el-button {
        background: none;
        color: #ffffff;
    }

</style>
